<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'myinfo.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style>
    body {
      background-color: #f0f3ef;
    }

    .header {
      width: 100%;
      height: 30px;
      background-color: #e3e4e5;
      height: 30px;


    }

    .header .header-left {
    
      float: left;
      line-height: 30px;
      margin-left: 50px;
      font-size: 12px;

      color: #333333;
    }
	.header .header-left a,.header-right a{
		text-decoration:none;
		color:#333333;
	}
    .header .header-right {
      height: 30px;
      float: right;

      margin: auto;
      
    }

    .header-right li {
      list-style: none;
      float: left;
      height: 30px;
      text-align: middle;
      font-size: 12px;
      line-height: 30px;
      color: #333333;
      display: flex;
      align-items: center;
    }

    .header-right li:last-child {
      border: none;

    }

    .header-right li a {
      line-height: 30px;
      margin-right: 20px;
      margin-left: 20px;
    }

    .content-title {
    margin-top:0px;
      height: 100px;
      background-color: white;
      position: relative;
    }
.container-page{
width:100%;
height:100px;
position:relative;
margin:0 auto;
}
.leftfix {
    float: left;
}

.rightfix {
    float: right;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
    .content-title img {
      width: 90px;
      height: 90px;
      float: left;
      position: absolute;
      top: 10px;
      margin-left: 55px;
    }

    .content-title span {
      float: left;
      font-size: 20px;
      color: #333333;
      margin-left: 20px;
      position: absolute;
      top: 50px;
      left: 120px;

    }

    .content-title .goshop img {
      width: 20px;
      height: 20px;
    }

    .goshop {
      width: 150px;
      float: right;
      background-color: gainsboro;
      position: absolute;
      right: 50px;
      top: 40px;
      height: 30px;
      font-size: 16px;
    }

    .goshop a {
      text-decoration: none;
      color: #333333;
      text-align: right;
      float: right;
      margin-top: 5px;
      margin-right: 25px;

    }

    .goshop img {
      position: absolute;
      margin-left: 20px;
      margin-top: -5px;
    }

   .search form {
    font-size: 0;
    
    margin-top: 42px;
    position:absolute;
    right:400px;
}

.search form input {
    width: 308px;
    height: 34px;
    border: 1px solid #DD302D;
}

.search form button {
    width: 78px;
    height: 34px;
    border: 1px solid #DD302D;
    vertical-align: top;
    background-image: url(../images/serch_icon.png);
    background-repeat: no-repeat;
    background-color: #DD302D;
    background-position: 28px 6px;
}
.fix-page{
    width:1200px;
    margin:0 auto;
}
    .content-left {
      width: 250px;
      background-color: #ffffff;
      
      margin-top: 0px;
      float: left;
    }


    .content-left .order,
    .money,
    .attention,
    .action {
      list-style: none;
      margin-bottom: 10px;

      padding-bottom: 20px;
      ;
      border-bottom: 1px solid #f3f3f3;
    }

    .content-left .order {
      padding-top: 10px;

    }

    .content-left .order li,
    .money li,
    .attention li,
    .action li {
      margin-top: 10px;
    }

    .content-left .order li a,
    .money li a,
    .attention li a,
    .action li a {
      text-decoration: none;
      color: #333333;
      font-size: 14px;

    }

    .content-left .order li a:last-child,
    .money li a:last-child,
    .attention li a:last-child,
    .action li a:last-child {
      margin-bottom: 10px;
    }

    .content-right {
      width: 920px;
      height: 600px;
      float: right;
     
      position: relative;
    }

    .righttop {
      width:100%;
      height: 200px;
      background-color: #ffffff;

      margin-top: 20px;


    }

    .toptitle {
      height: 40px;
      border-bottom: 1px solid #f3f3f3;
      font-size: 16px;
      text-align: center;
      line-height: 40px;
      color: #333333;
    }

    .infomy {
      list-style: none;
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }

    .infomy li {
      float: left;
      margin-right: 40px;
      width: 90px;
      height: 100px;
      font-size: 14px;
      text-align: center;

    }

    .infomy li a {
      text-decoration: none;
      padding-bottom: 30px;
      color: #666666;
      font-weight: 700;
      font-size: 24px;

    }
	.infomy a img{
	width:40px;
	height:40px;}
    .infomy li p {
      margin-top: 30px;
    }



    .rightcontent .content-top {
      margin-top: 20px;
      width: 680px;
      height: 360px;
      background-color: #ffffff;

    }

    .rightcontent .content-top .content-title {
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: #333333;
      border-bottom: 1px solid #f3f3f3;
      font-size: 16px;
    }

    .rightcontent .content-top .infoorder {
      list-style: none;
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }

    .infoorder li {
      float: left;
      margin-right: 20px;
      width: 90px;
      height: 100px;
      font-size: 14px;
      text-align: center;
      margin-top: 20px;
    }

    .infoorder li a img {
      width: 60px;
      height: 60px;
    }

    .content-middle {
      font-size: 16px;
      color: #999999;
      margin-top: 80px;
      text-align: center;

    }

    .find-left {
      width: 220px;
      height: 170px;
      background-color: #ffffff;
      position: absolute;
      right: 0px;
      top: 240px;
    }

    .find-left .myattention {

      height: 40px;
      border-bottom: 1px solid #f3f3f3;
      font-size: 16px;
      text-align: center;
      line-height: 40px;
      color: #333333;
    }

    .attention-form {
      list-style: none;
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }

    .attention-form li {
      list-style: none;
      float: left;
      margin-right: 20px;
      width: 90px;
      height: 100px;
      font-size: 14px;
      text-align: center;
      margin-top: 10px;
    }

    .attention-form li a {
      text-decoration: none;
    }

    .find-bottom {
      width: 220px;
      height: 160px;
      background-color: #ffffff;
      position: absolute;
      right: 0px;
      top: 438px;
    }

    .find-bottom .find-action {

      height: 40px;
      border-bottom: 1px solid #f3f3f3;
      font-size: 16px;
      text-align: center;
      line-height: 40px;
      color: #333333;
    }

    .action-form {
      list-style: none;
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }

    .action-form li {
      list-style: none;
      float: left;
      margin-right: 20px;
      width: 90px;
      height: 100px;
      font-size: 14px;
      text-align: center;
      margin-top: 10px;
    }

    .action-form li a {
      text-decoration: none;
    }
 
  </style>
</head>
<div class="header">
<div class="fix-page">
  <div class="header-left"><a href="./index.html">商城首页</a></div>
  <ul class="header-right">
    <li><a href="/works/session/myorder.jsp">我的订单</a><span>|</span></li>
    <li><a href="#">企业采购</a><span>|</span></li>
    <li><a href="#">订单服务</a><span>|</span></li>
    <li><a href="#">网站导航</a><span>|</span></li>
    <li><a href="/works/exit" class="tuichu">退出登录</a></li>
  </ul>
 </div>
</div>
<div class="content-title">

	 <div class="container-page clearfix">
            <!-- log区域 -->
            <div class="logo leftfix">
                <img class="newlogo" src="./images/log.png" alt="尚品汇">
            </div>
            <!-- 搜索区域 -->
            <div class="search rightfix">
                <form action="#">
                    <input type="text">
                    <button>搜索</button>
                </form>
            </div>
      
  
  <span>我的小🦌商城</span> 
  
  <div class="goshop"><img src="./images/购物车.png" alt=""><a href="/works/session/goshop.jsp">我的购物车</a></div>
	</div>
</div>
<div class="fix-page">
<div class="content-left">
  <ul class="order">
    <li>订单中心</li>
    <li><a href="/works/session/myorder.jsp">我的订单</a></li>
    <li><a href="#">评价晒单</a></li>
  </ul>
  <ul class="money">
    <li>我的钱包</li>
    <li><a href="#">优惠卷</a></li>
    <li><a href="#">白条</a></li>
    <li><a href="#">红包</a></li>
    <li><a href="#">礼品卡</a></li>
  </ul>
  <ul class="attention">
    <li>我的关注</li>
    <li><a href="#">关注商品</a></li>
    <li><a href="#">关注店铺</a></li>
  </ul>
  <ul class="action">
    <li>我的活动</li>
    <li><a href="#">我的预约</a></li>
    <li><a href="#">我的拍卖</a></li>
    <li><a href="#">我的回收单</a></li>
  </ul>
</div>
<div class="content-right">
  <div class="righttop">
    <div class="toptitle">
      我的钱包
    </div>
    <div class="topcontent">
      <ul class="infomy">
        <li><a href="#"><img src="./images/用户头像.png"></a>
       
        
          <p>用户名</p>
        </li>
        <li><a href="#">9</a>
          <p>优惠卷</p>
        </li>
        <li><a href="#">20</a>
          <p>优豆</p>
        </li>
        <li><a href="#">0.00</a>
          <p>余额</p>
        </li>
        <li><a href="#">——</a>
          <p>暂未开通白条</p>
        </li>
        <li><a href="#">0.00</a>
          <p>小金库昨天收益</p>
        </li>
      </ul>

    </div>
  </div>
  <div class="rightcontent">
    <div class="content-top">
      <div class="content-title">
        我的订单
      </div>
      <div class="contentdouble">
        <ul class="infoorder">
          <li><a href="#"><img src="./images/待付款.png" alt=""></a>
            <p>待付款</p>
          </li>
          <li><a href="#"><img src="./images/待收货.png" alt=""></a>
            <p>待收货</p>
          </li>
          <li><a href="#"><img src="./images/待评价.png" alt=""></a>
            <p>待评价</p>
          </li>
          <li><a href="#"><img src="./images/售后.png" alt=""></a>
            <p>退换/售后</p>
          </li>
          <li><a href="/works/session/myorder.jsp"><img src="./images/全部订单.png" alt=""></a>
            <p>全部订单</p>
          </li>
        </ul>
        <div class="content-middle">
          您买的东西太少了这里都是空空的，快去挑选合适的商品吧！
        </div>

      </div>
      <div class="find-left">
        <div class="myattention">我的关注</div>
        <ul class="attention-form">
          <li><a href="#">10</a>
            <p>商品关注</p>
          </li>
          <li><a href="#">147</a>
            <p>店铺关注</p>
          </li>
        </ul>
      </div>
      <div class="find-bottom">
        <div class="find-action">我的活动</div>
        <ul class="action-form">
          <li><a href="#">12</a>
            <p>商品活动</p>
          </li>
          <li><a href="#">19</a>
            <p>会员活动</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</div>
   

  </body>

</html>